<script setup lang="ts">
import { useHospitalDetailStore } from '../../../../store/modules/hospital/index';
const { hospitalInfo, departmentArr } = useHospitalDetailStore();
const { hospital, bookingRule } = hospitalInfo;
</script>
<template>
  <div class="register">
    <!-- 医院名称  医院等级 -->
    <div class="top">
      <div class="title">{{ hospital?.hosname }}</div>
      <div class="level">
        <svg
          data-v-f5b63fb5=""
          t="1688268893064"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="897"
        >
          <path
            data-v-f5b63fb5=""
            d="M891.392 870.4a40.96 40.96 0 1 1 0 81.92H117.76a40.96 40.96 0 1 1 0-81.92h773.632zM501.76 153.6a40.96 40.96 0 0 1 40.96 40.96v517.632a40.96 40.96 0 1 1-81.92 0V194.56a40.96 40.96 0 0 1 40.96-40.96zM215.04 51.2a40.96 40.96 0 0 1 40.96 40.96v620.032a40.96 40.96 0 1 1-81.92 0V92.16a40.96 40.96 0 0 1 40.96-40.96z m573.44 204.8a40.96 40.96 0 0 1 40.96 40.96v415.232a40.96 40.96 0 1 1-81.92 0V296.96a40.96 40.96 0 0 1 40.96-40.96z"
            fill="currentcolor"
            p-id="898"
          ></path>
        </svg>
        <span>{{ hospital?.param?.hostypeString }}</span>
      </div>
    </div>
    <!-- 医院介绍 -->
    <div class="intro">
      <div class="left">
        <!-- 左：logo  ../../../../assets/images/logo.png-->

        <img :src="`data:image/jpeg;base64,${hospital?.logoData}`" alt="" />
      </div>
      <div class="right">
        <!-- 右：挂号规则  -->
        <div class="rbox">
          <!-- 右：预约时间  -->
          <!-- 右：具体地址  -->
          <!-- 右：规划路线  -->
          <!-- 右：退号时间  -->
          <div class="rtitle">挂号规则</div>
          <div class="content">
            <div class="first">
              <div class="item">
                <span class="item-title">预约周期：</span>
                <span class="item-text">{{ bookingRule?.cycle }}天</span>
              </div>
              <div class="item">
                <span class="item-title">放号时间：</span>
                <span class="item-text">{{ bookingRule?.releaseTime }}</span>
              </div>
              <div class="item">
                <span class="item-title">停挂时间：</span>
                <span class="item-text">{{ bookingRule?.stopTime }}</span>
              </div>
            </div>
            <div class="item">
              <span class="item-title">具体位置：</span>
              <span class="item-text">{{ hospital?.param?.fullAddress }}</span>
            </div>
            <div class="item">
              <span class="item-title">规划路线：</span>
              <span class="item-text">{{ hospital?.route }}</span>
            </div>
            <div class="item">
              <span class="item-title">退号时间：</span>
              <span class="item-text">就诊前一工作日{{ bookingRule?.quitTime }}前取消</span>
            </div>
          </div>
        </div>
        <!-- 医院预约规则  -->
        <div class="rbox">
          <div class="rtitle">医院预约规则</div>
          <div class="content">
            <ul class="rule-list">
              <li v-for="rule in bookingRule?.rule" :key="rule">{{ rule }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择科室 -->
    <!-- tabs -->
    <div class="tabs">
      <div class="title">选择科室</div>
      <div class="tabcontent" v-if="departmentArr.length > 0">
        <el-tabs tab-position="left" class="demo-tabs" style="height: 100%; position: relative">
          <template v-for="item in departmentArr">
            <el-tab-pane :label="item.depname">
              <div class="tab-panel">
                <h2 class="itemname">{{ item.depname }}</h2>

                <template v-if="item.children">
                  <div class="dename-content">
                    <div class="dename" v-for="name in item.children">
                      {{ name.depname }}
                    </div>
                  </div>
                </template>
              </div>
            </el-tab-pane>
          </template>
        </el-tabs>
      </div>
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.register {
  .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .title {
      color: #333;
      font-size: 20px;
      font-weight: 700;
      margin-right: 15px;
    }
    .level {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 14px;
      .icon {
        width: 14px;
        height: 14px;
      }
      > span {
        font-size: 14px;
        margin: 0 3px;
      }
    }
  }
  .intro {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    .left {
      width: 80px;
      overflow: hidden;
      margin: 10px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .right {
      flex: 1;
      margin: 0 20px;
      .rbox {
        margin-bottom: 20px;
        .rtitle {
          color: #333;
          font-size: 14px;
          margin: 10px 0;
        }
        .content {
          color: #999;
          font-size: 12px;
          .first {
            display: flex;
            .item {
              margin-right: 20px;
            }
          }
          .item {
            margin-top: 10px;
            .item-text {
              color: #333;
              letter-spacing: 1px;
              line-height: 20px;
            }
          }

          ul.rule-list {
            list-style: decimal;
            li {
              margin: 15px 15px;
            }
          }
        }
      }
    }
  }
  .tabs {
    margin-top: 20px;
    .title {
      letter-spacing: 1px;
      font-weight: 700;
      color: #333;
      font-size: 16px;
    }
    .tabcontent {
      margin: 20px 0;
      background: aliceblue;
      .demo-tabs {
        position: relative;
        border: 5px solid aliceblue;
        display: flex;
        width: 100%;
        height: 100%;
        :deep(.el-tabs__nav) {
          padding: 10px 0 10px 0;
          background: aliceblue;
          font-size: 16px;
          height: auto;
        }
        :deep(.el-tabs--left .el-tabs__header.is-left) {
          float: none;
        }

        :deep(.el-tabs__active-bar.is-left) {
          left: 0;
          height: 30px !important;
          top: 5px;
          width: 3px;
          border-radius: 20px !important;
          margin-right: 0;
        }
        :deep(.el-tabs__item) {
          background: aliceblue;
          text-align: center;
          justify-content: center;
        }
        :deep(.el-tabs__item.el-tabs__item.is-active) {
          background: #fff;
          font-weight: 700;
          border-top-left-radius: 7px;
          border-bottom-left-radius: 7px;
        }
        :deep(.el-tabs__content) {
          background: #fff;
          padding: 20px;
          box-sizing: border-box;
          border-radius: 10px;
          flex: 1;
          height: auto;
        }
      }
      .tab-panel {
        .itemname {
          font-weight: 700;
          color: #333;
          letter-spacing: 1px;
          font-size: 14px;
        }
        .dename-content {
          padding: 20px 0;
          display: flex;
          flex-wrap: wrap;
          .dename {
            width: 33%;
            text-align: left;
            line-height: 30px;
            color: #666;
            cursor: pointer;
            &:hover {
              color: var(--text-hover-color);
            }
          }
        }
      }
    }
  }
}
</style>
